<template>
  <!-- 上传文件夹 -->
  <div class="context">
    <Row>
      <iCol span="12">
        <Card title="文件上传列表" icon="md-list" :padding="0" shadow style="width: 300px;" class="card">
          <CellGroup>
            <div v-for="(file,index) of fileList" :key="index" class="uploadFileList">
              <Cell :title="file.name" />
              <Progress :percent="file.progress" />
            </div>
          </CellGroup>
        </Card>
        <div style="height:24px"></div>
        <a href="javascript:;" class="file">
          选择文件
          <input
            type="file"
            ref="fileList"
            id="fileList"
            webkitdirectory
            directory
            @change="showFileList"
          />
        </a>
        <Button type="primary" @click="upload">上传</Button>
      </iCol>
      <iCol span="12">
        <Card title="文件失败列表" icon="md-list" :padding="0" shadow style="width: 300px;" class="card">
          <CellGroup>
            <div v-for="(file,index) of errorFileList" :key="index" class="uploadFileList">
              <Cell :title="file.name" />
            </div>
          </CellGroup>
        </Card>
        <div style="height:24px"></div>
        <Button type="primary" @click="uploadErrorFile">重新上传</Button>
      </iCol>
    </Row>
  </div>
</template>

<script>
import Axios from "axios";
const SERVICE_URL = "/upload";
const headers = {
  "Content-Type": "multipart/form-data"
};
export default {
  data() {
    return {
      fileList: [],
      errorFileList: []
    };
  },
  methods: {
    showFileList() {
      let files = this.$refs.fileList.files || [];
      this.fileList = [];
      // 显示上传列表
      files.forEach((file, index) => {
        this.fileList.push({
          name: file.name,
          id: index,
          size: file.size,
          path: file.webkitRelativePath,
          file: file,
          progress: 0
        });
      });
    },
    uploadErrorFile() {
      this.fileList = this.errorFileList.map(fileObj => {
        fileObj.progress = 0;
        return fileObj;
      });
      this.errorFileList = [];
      this.upload();
    },
    upload() {
      // 动态创建 form 表单 循环上传
      this.fileList.forEach((fileObj, index) => {
        let formData = new FormData();
        formData.append("path", fileObj.path);
        formData.append("file", fileObj.file);
        let configs = {
          headers: headers,
          // 显示上传进度
          onUploadProgress: e => {
            let completeProgress = ((e.loaded / e.total) * 100) | 0;
            fileObj.progress = completeProgress;
            this.fileList.splice(index, 1, fileObj);
          }
        };
        Axios.post(SERVICE_URL + "/upload/uploadFile", formData, configs).then(
          res => {
            if (res.data.state !== "ok") {
              this.errorFileList.push(fileObj);
            }
            if (index + 1 == this.fileList.length) {
              this.$Notice.info({ title: "提示", desc: "文件上传完毕" });
            }
          }
        );
      });
    }
  }
};
</script>
<style scoped>
.uploadFileList {
  padding: 0 8px;
}
.file {
  vertical-align: top;
  position: relative;
  display: inline-block;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
}

.file input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}

.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
.context {
  padding: 24px;
}
.card {
  border: 1px solid #969696;
}
</style>